<template>
  <div>
    <!-- 基础类型 -->
    <h1>{{ count }}</h1>
    <h1>{{ text }}</h1>
    <p>
      <button @click.prevent="count++">+1</button>
      <button @click.prevent="count--">-1</button>
    </p>


    <!-- object -->
    <h1>{{ jsonStr }}</h1>
    <h1>{{ getJsonStr() }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      info: {
        user: {
          name: '小王',
        },
      },
    };
  },
  computed: {
    // 默认为 getter
    text() {
      return `当前计数为${this.count}`;
    },
    jsonStr() {
      return JSON.stringify(this.info);
    },
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`观察到count发送变化，前值为${oldVal},现值为${newVal}`);
    },
    info: {
      handler(newVal, oldVal) {
        console.log(`观察到count发送变化，前值为${JSON.stringify(oldVal)},现值为${JSON.stringify(newVal)}`);
      },
      deep: true,
    },
  },
  methods: {
    getJsonStr() {
      return JSON.stringify(this.info);
    },
  },
}
</script>

<style>

</style>